<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的订单</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="css/styleee.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
        <script src="/js/jquery/jquery.min.js"></script>
        <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
        <script src="/js/plugins/jrender/jrender.min.js"></script>
        <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
        <script src="/js/plugins/dialog2/dialog.min.js"></script>


    </head>
    <body>

        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed">
                <a href="/taxi.html" class="aui-navBar-item">
                    <i class="icon icon-return"></i>
                </a>
                <div class="aui-center">
                    <span class="aui-center-title">                                                             </span>
                </div>
                <a href="javascript:;" class="aui-navBar-item">开发票
                </a>
            </header>
            <section class="aui-scrollView order">
                <div class="aui-order-title">
                    <h2>已完成订单</h2>
                    <div id="Ordercar" render-loop="list">
                    <div class="aui-order-box" >
                        <a href="javascript:void(0);" class="aui-well-item">

                            <div class="aui-well-item-bd">
                                <h3 render-html="list.car"></h3>
                            </div>
                            <span class="aui-well-item-fr" render-html="list.frState"></span>
                        </a>
                        <p class="aui-order-fl aui-order-time" render-html="list.time"></p>
                        <p class="aui-order-fl aui-order-address" render-html="list.address"></p>
                        <p class="aui-order-fl aui-order-door" render-html="list.door"></p>
                    </div>
                    </div>
                </div>
            </section>
        </section>

        <script>
            var currentPage = 1;
            var pages;
            var store = [];

            function query() {
                $.get("/taxiOrders", {"currentPage": currentPage,"pageSize":5},function (data) {
                    console.log(data);
                    var json = {
                        list: $.merge(store, data.list)
                    };
                    $(".order").renderValues(json);
                    currentPage++;
                    pages = data.pages;
                });
            }

            query();
            //滚动条事件
            //小窗口事件，不能使用window来进进行滚动和 确定高度，要使用窗口来绑定
            $(".order").scroll(function () {
                //页面滑动查询
                if (($(".order").height() + $(document).scrollTop()) >=$(".order").height()-2) {
                    if (currentPage <= pages) {
                        query();
                    }else{
                        $(document).dialog({
                            type : "notice",
                            position:"bottom",
                            infoText: '已经到底了',
                            autoClose: 800
                        });
                    }
                }
            });




        </script>


    </body>

</html>
